<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../../../css/animate.css" rel="stylesheet">
    <link href="../../../js/plugins/jquery-layout/jquery.layout-latest.css" rel="stylesheet">

    <link href="../../../css/style.css" rel="stylesheet">
    <link href="../../../css/bootstrap-table.css" rel="stylesheet">

    <style type="text/css">
        [v-clock] {
            display: none !important;
        }

        .box-title {
            font-size: 16px;
            margin-bottom: 13px;
            float: left
        }
        .box-tools {
            position: relative;
            top: -5px;
            right: 0
        }
    </style>
</head>

<body style="background-color: #f3f3f4;overflow: hidden;" >
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>角色管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <span>系统管理</span>
                </li>
                <li class="active">
                    <span>用户管理</span>
                </li>
            </ol>
        </div>
    </div>
    <div id="wrapper" v-cloak>
        <div class="gray-bg">
        <!-- 内容 -->
            <div class="wrapper wrapper-content">
                <div class="row">
                    <div class="ui-layout-west">
                        <div class="col-md-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content mailbox-content">
                                    <div class="file-manager">
                                        <div class="box-title">
                                            <i class="fa icon-grid"></i> 组织机构
                                        </div>
                                        <div class="box-tools pull-right">
                                            <a type="button" class="btn btn-box-tool menuItem" href="#" onclick="dept()" title="管理机构"><i class="fa fa-edit"></i></a>
                                        </div>
                                    </div>
                                    <div class="ui-layout-content">
                                        <div id="tree" class="ztree"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-9 animated fadeInRight ui-layout-center">
                        <div id="toolbar" class="btn-group">
                            <button id="btn_add" type="button" @click="add" class="btn btn-default">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                            </button>
                            <button id="btn_edit" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                            </button>
                            <button id="btn_delete" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                            </button>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="ibox ">
                                    <div class="ibox-content">
                                        <div class="jqGrid_wrapper">
                                            <table id="table_list"></table>
                                            <div id="pager_list"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Mainly scripts -->
    <script src="../../../js/jquery-2.1.1.js"></script>
    <script src="../../../js/plugins/layer/layer.js"></script>

    <script src="../../../js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!-- jqGrid -->
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/bootstrap-table.js"></script>
    <script src="../../../js/bootstrap-table-zh-CN.js"></script>

    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/common.js"></script>
    <script>
        $(function () {
            var url = baseURL + 'sysRole/page';
            var columns = [{
                checkbox:true
            }, {
                field: 'roleName',
                title: '角色名称',
                align: 'center'
            } , {
                field: 'remark',
                title: '备注',
                align: 'center'
            } ,{
                field: 'createTime',
                title: '创建时间',
                align: 'center',
                formatter: function (value, row, index) {
                    return new Date(value).Format('yyyy-MM-dd HH:mm');
                }
            }];
            $.initTable($("#table_list"),columns,url);
        });

        var vm = new Vue({
            el:'#ycapp',
            data:{
                title:null,
                role:{}
            },
            methods: {
                add: function(){
                    vm.title = "新增";
                    vm.role = {};
                    layer.open({
                        type: 2,
                        area: ['450px', '380px'],
                        shadeClose: true,
                        shade: false,
                        maxmin: true,
                        content: 'roleEdit.html'
                    });
                }
            }
        });
    </script>

</body>

</html>
